<template>
  <el-form :model="student" ref="studentForm" label-width="100px" style="max-width: 600px; margin: 40px auto;">
    <el-form-item label="学号" prop="stu_no">
      <el-input v-model="student.stu_no" placeholder="请输入学号" />
    </el-form-item>
    <el-form-item label="头像URL" prop="stu_image_url">
      <el-input v-model="student.stu_image_url" placeholder="请输入头像URL" />
    </el-form-item>
    <el-form-item label="姓名" prop="stu_name">
      <el-input v-model="student.stu_name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="性别" prop="stu_sex">
      <el-radio-group v-model="student.stu_sex">
        <el-radio :label="0">男</el-radio>
        <el-radio :label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="student.password" type="password" placeholder="请输入密码" />
    </el-form-item>
    <el-form-item label="手机号" prop="stu_phone">
      <el-input v-model="student.stu_phone" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="薪资" prop="sal">
      <el-input v-model="student.sal" placeholder="请输入薪资" />
    </el-form-item>
    <el-form-item label="地址" prop="stu_address">
      <el-input v-model="student.stu_address" placeholder="请输入地址" />
    </el-form-item>
    <el-form-item label="生日" prop="stu_birthday">
      <el-date-picker v-model="student.stu_birthday" type="date" placeholder="选择生日" style="width: 100%;" />
    </el-form-item>
    <el-form-item label="邮箱" prop="stu_email">
      <el-input v-model="student.stu_email" placeholder="请输入邮箱" />
    </el-form-item>
      <el-form-item label="学历" prop="stu_education">
        <el-radio-group v-model="student.stu_education">
         <el-radio label="本科">本科</el-radio>
           <el-radio label="专科">专科</el-radio>
           <el-radio label="硕士">硕士</el-radio>
          <el-radio label="博士">博士</el-radio>
         <el-radio label="其他">其他</el-radio>
        </el-radio-group>
      </el-form-item>
    <el-form-item label="兴趣" prop="stu_interest">
      <el-input v-model="student.stu_interest" placeholder="请输入兴趣" />
    </el-form-item>
    <el-form-item label="喜欢的颜色" prop="my_color">
      <el-input v-model="student.my_color" placeholder="请输入喜欢的颜色" />
    </el-form-item>
    <el-form-item label="幸运数字" prop="lucky_number">
      <el-input v-model="student.lucky_number" placeholder="请输入幸运数字" />
    </el-form-item>
    <el-form-item label="备注" prop="re_mark">
      <el-input v-model="student.re_mark" placeholder="请输入备注" />
    </el-form-item>
    <el-form-item label="创建日期" prop="create_date">
      <el-date-picker v-model="student.create_date" type="date" placeholder="选择创建日期" style="width: 100%;" />
    </el-form-item>
    <el-form-item label="班级ID" prop="clsid">
      <el-input v-model="student.clsid" placeholder="请输入班级ID" />
    </el-form-item>
    <el-form-item label="班级" prop="clsid">
      <el-select v-model="student.clsid" placeholder="请选择班级">
        <el-option v-for="item in classList" :key="item.clsid" :label="item.className" :value="item.clsid" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addStudent">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'AddStudentForm',
  data() {
    return {
      student: {
        stu_no: '',
        stu_image_url: '',
        stu_name: '',
        stu_sex: 0,
        password: '',
        stu_phone: '',
        sal: '',
        stu_address: '',
        stu_birthday: '',
        stu_email: '',
        stu_education: '',
        stu_interest: '',
        my_color: '',
        lucky_number: '',
        re_mark: '',
        create_date: '',
        clsid: ''
      },
      classList: []
    }
  },
  mounted() {
    this.fetchClassList();
  },
  methods: {
    fetchClassList() {
      this.$http.get('http://localhost:8080/class/clsinfoall').then(res => {
        this.classList = res.data;
      });
    },
    addStudent() {
      this.$http.post("http://localhost:8080/student/insert", this.student).then(() => {
        this.$message.success('添加成功');
        //重置操作
        Object.keys(this.student).forEach(key => this.student[key] = '');
      });
    },
    resetForm() {
      if (this.$refs.studentForm) this.$refs.studentForm.resetFields();
    }
  }
}
</script>